let url_host = window.location.host;
let socket = io.connect(`http://` + url_host + `?type=client`, {
    path: "/chat"
        //  httpOnly: false
});

$("#sendMessage").click(function() {
    var content = $("#message").val();
    if (content != '') {
        console.log(content);
        var data = {
            content,
            type: 0,
            ohter: null
        };
        //向客服发送消息
        socket.emit("user-message", data);

        //   自己发送消息推倒消息框
        var dete = new Date();
        var str1 =
            `   <div class="chat-for-user chat-item">
                    <div class="chat-item-info">
                        <div class="chat-item-info-nick">发送指令<span class="time">` +
            dete +
            `</span></div>
                    </div>
                   <div class="chat-item-detail">
                        <div class="chat-item-content "style="max-width: 100%;min-width:100px;">
                            ` +
            content +
            `
                        </div>
                        <div class="chat-item-user">
                            <div class="chat-item-user-thumb">
                                <span class="glyphicon glyphicon-user"></span>
                            </div>
                        </div>
                    </div>
                </div>`;
        $(".chat-content").append(str1);

        // 设置滚动条
        setScorll();
        $("#message").val("");
    } else {
        showTip('发送内容不能为空', 'danger')
    }
});


// 弹窗提示自定义的
function showTip(tip, type) {
    var $tip = $('#tip');
    $tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', -$tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);
}

//监听来自于服务器回复的事件推送
var cnut = 1;
var music = document.getElementById("audio");
socket.on("server-message-push", data => {
    rfidData = data.split(',', 4)
    console.log("接收到客服消息：", rfidData[0], rfidData);
    if (audioNO) {
        music.play();
    } else {
        music.pause()
    }

    var date = new Date();
    var str =
        ` <div class="chat-for-server chat-item">
          <div class="chat-item-info">
        <div class="chat-item-info-nick">收到ID：` +
        '第' + cnut + '条' +
        ` <span class="time">` +
        date +
        `</span></div>
    </div>
    <div class="chat-item-detail">
        <div class="chat-item-user">
            <div class="chat-item-user-thumb">
                <span class="glyphicon glyphicon-cloud"></span>
            </div>
        </div>
        <div class="chat-item-content" >
           ` +
        rfidData[0] +
        `<span class='right text-sm bg-warning' ></span>
        </div>
    </div>
</div>`;
    $(".chat-content").append(str);
    setScorll();
    cnut++
});


//首次获取聊天本地记录
window.onload = function() {
    // vue
    // var vm = new Vue({
    //     el: "#app",
    //     data: {
    //         name: "kdy",
    //         job: "软件工程师",
    //         frist_http: {}
    //     },
    //     created() {
    //         // console.log("creartdRUN");
    //         var cook = document.cookie;
    //         console.log("cook:", cook);
    //         // 接受第一次连接信息 取出本地缓存信息
    //         var _this = this;
    //         socket.on("clinet-frist-push", data => {
    //             // console.log("clinet-frist-push:", data);
    //             _this.frist_http = data;
    //             // console.log("data11:", _this.frist_http);
    //         });
    //         // console.log('data1:', this.name)
    //     },
    //     destroyed() {
    //         // console.log('data2:', this.job)
    //     },
    //     methods: {
    //         send() {
    //             alert("delete");
    //         }
    //     }
    // });

    // 开关选择字体列表
    $('#kinerDatePickerInput1').kinerDatePicker({
        clickMaskHide: true,
        okHandler: function(vals, ctx) {
            console.log("确定选择:", vals, ctx);
            console.log('vals:', vals[0])
            var nb = vals[0]
            var font = {
                    楷体: "KaiTi",
                    宋体: "STFangsong",
                    微软雅黑: "Microsoft YaHei",
                    行书: 'STXingkai',
                    华文彩云: 'STCaiyun'
                }
                // console.log(font[nb])
            $('#btn1').css('font-family', font[nb])
            $('#message').css('font-family', font[nb])
                // $('.chat-item-content').css('font-family', font[nb]) //设置子元素会在动态情况下失效
            $('.chat-content').css('font-family', font[nb]) //设置符及元素 
        },
        cancelHandler: function(ctx) {
            console.log("取消选择:", ctx);
        }
    });

    //   设置全屏 // 设置全屏
    $('#alarm-fullscreen-toggler').on('click', function(e) {
        var element = document.documentElement; // 返回 html dom 中的root 节点 <html>
        if (!$('body').hasClass('full-screen')) {
            $('body').addClass('full-screen');
            $('#alarm-fullscreen-toggler').addClass('active');
            // 判断浏览器设备类型
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) { // 兼容火狐
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) { // 兼容谷歌
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) { // 兼容IE
                element.msRequestFullscreen();
            }
            // 切换全屏按钮
            $('#alarm-fullscreen-toggler').attr('src', '/images/close.jpg');
        } else { // 退出全屏
            console.log(document);
            $('body').removeClass('full-screen');
            $('#alarm-fullscreen-toggler').removeClass('active');
            //  退出全屏
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
            // 切换全屏按钮
            $('#alarm-fullscreen-toggler').attr('src', '/images/open.jpg');
        }
    });

};

// 滚动条设置函数
function setScorll() {
    var chat_item = document.getElementsByClassName("chat-item");
    var itemH = $(".chat-item").outerHeight(true);
    var socrollH = chat_item.length * itemH;
    console.log(socrollH, itemH);
    $(".chat-content").scrollTop(socrollH);
}

// 接收服务器第一次推送信息
socket.on('clinet-frist-push', data => {
    console.log("收到clinet-frist-push数据：", data)
})


// t图片上传跳转
function getimage() {
    window.location.href = '/image'
}


//静音按钮
var jy = document.getElementById('jy');
var audioNO = true
function clickjy() {

    if (jy.checked == true) {
        // $('jy').prop('checked', true)
        jy.checked = true
        audioNO = true
        console.log("勾选等假", audioNO)
    } else if (jy.checked == false) {
        jy.checked = false
        audioNO = false
        console.log("勾选等真", audioNO)

    }

}